/***************************************************************************
*   Copyright (C) 2011 by Chuck Gao & Alex Liu                             *
*                                                                          *
*   This program is free software: you can redistribute it and/or modify   *
*   it under the terms of the GNU General Public License as published by   *
*   the Free Software Foundation, either version 3 of the License, or      *
*   (at your option) any later version.                                    *
*                                                                          *
*   This program is distributed in the hope that it will be useful,        *
*   but WITHOUT ANY WARRANTY; without even the implied warranty of         *
*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
*   GNU General Public License for more details.                           *
*                                                                          *
*   You should have received a copy of the GNU General Public License      *
*   along with this program.  If not, see <http://www.gnu.org/licenses/>.  *
*                                                                          *
*   Contact author: chuckgao.cg@gmail.com                                  *
*                   alex2202375@gmail.com                                  *
***************************************************************************/

import QtQuick 1.0

Rectangle {
    width: 360
    height: 1200
    color: Qt.rgba(100,100,100,0.2)
    border.color: Qt.rgba(255,255,255,0.2)
    border.width: 2
    radius: 20

//    Rectangle {
//        anchors.fill: parent
//        color: "white"
//        opacity: 0.2
//    }

    property int factsTableMargin: 40

    Column {
        width: parent.width - factsTableMargin
        height: parent.height - factsTableMargin
        anchors.centerIn: parent
        // Nurtrition Facts
        Item {
            width: parent.width
            height: 40
            Text {
                font.pointSize: 32
                verticalAlignment: Text.AlignVCenter
                text: "Nurtrition Facts"
            }
        }

        // Serving Size 1 dish(500g)
        // Power by Alex Liu
        Item {
            width: parent.width
            height: 48
            Text {
                height: 24
                anchors.top: parent.top
                anchors.left: parent.left
                font.pointSize: 12
                verticalAlignment: Text.AlignBottom
                text: "Serving Size 1 dish(500g)"
            }
            Text {
                height: 24
                anchors.left: parent.left
                anchors.bottom: parent.bottom
                font.pointSize: 12
                verticalAlignment: Text.AlignTop
                text: "Powered by Alex Liu"
            }
        }

        // Spacing line - bold
        Rectangle {
            width: parent.width
            height: 6
            color: "black"
            opacity: 0.8
        }

        // Amount Per serving
        Item {
            width: parent.width
            height: 24
            Text {
                height: 24
                anchors.top: parent.top
                anchors.left: parent.left
                font.pointSize: 14
                verticalAlignment: Text.AlignVCenter
                text: "Amount Per serving"
            }
        }

        // Spacing line - thin
        Rectangle {
            width: parent.width
            height: 2
            color: "black"
            opacity: 0.6
        }

        // Calories xxx Cal.from Fat xx
        Item {
            width: parent.width
            height: 24
            Text {
                height: 24
                anchors.top: parent.top
                anchors.left: parent.left
                font.pointSize: 14
                verticalAlignment: Text.AlignVCenter
                text: "Calories 100 Cal.from Fat 25"
            }
        }

        // Spacing line - normal
        Rectangle {
            width: parent.width
            height: 3
            color: "black"
            opacity: 0.8
        }

        // %Daily value*
        Item {
            width: parent.width
            height: 24

            Rectangle {
                // percentage area
                width: dailyValueText.paintedWidth
                height: 24
                anchors.right: parent.right
                color: "violet"
            }
            Text {
                id: dailyValueText
                height: 24
                anchors.right: parent.right
                font.pointSize: 12
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                text: "%Daily value*"
            }
        }

        Component {
            id: nurtritionDelegate
            Item {
                width: container.width
                height: 24

                Rectangle {
                    id: nurtritionDelegateRect
                    width: container.width - 40
                    height: 24
                }

                Component.onCompleted: {
                    if("limit" == recommended)
                    {
                        nurtritionDelegateRect.color = "gold"
                    }else if("recommend" == recommended)
                    {
                        nurtritionDelegateRect.color = "powderblue"
                    }else{
                        nurtritionDelegateRect.color = "transparent"
                    }
                }

                Text {
                    id: nurtritionNameText
                    width: 240
                    text: nurtrition
                    font.pointSize: 12
                    verticalAlignment: Text.AlignVCenter
                }

                Text {
                    width: 80
                    anchors.left: nurtritionNameText.right
                    text: weight
                    font.pointSize: 12
                    verticalAlignment: Text.AlignVCenter
                }

                Rectangle {
                    // percentage area
                    width: 40
                    height: 24
                    anchors.right: parent.right
                    color: "violet"
                    Text {
                        anchors.fill: parent
                        text: percentage
                        font.pointSize: 12
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.bold: true
                    }
                }
            }
        }

        Component {
            id: nurtritionSection
            Item {
                width: container.width
                height: 24

                Rectangle {
                    anchors.fill: parent
                    color: "black"
                    opacity: 0.6
                }

                Rectangle {
                    // percentage area
                    width: 40
                    height: 24
                    anchors.right: parent.right
                    color: "violet"
                }

                Text {
                    text: section
                    font.pointSize: 14
                    verticalAlignment: Text.AlignVCenter
                    font.bold: true
                    color: "white"
                }
            }
        }

        ListModel {
            id: nurtritionModel
            // Total Fat
            ListElement { nurtrition:"Saturated Fat"; weight:"3g"; percentage:"5%"; catalog: "Total Fat"; recommended: "limit" }
            ListElement { nurtrition:"Trans Fat"; weight:"3g"; percentage:"0%"; catalog: "Total Fat"; recommended: "recommend" }
            ListElement { nurtrition:"Polyunsaturated Fat"; weight:"3g"; percentage:"1%"; catalog: "Total Fat"; recommended: "limit"  }
            ListElement { nurtrition:"Monounsaturated Fat"; weight:"3g"; percentage:"0%"; catalog: "Total Fat"; recommended: ""  }
            // Cholesterol
            ListElement { nurtrition:"Cholesterol"; weight:"13g"; percentage:"5%"; catalog: "Cholesterol"; recommended: "recommend"  }
            // Sodium
            ListElement { nurtrition:"Sodium"; weight:"0.5g"; percentage:"0%"; catalog: "Sodium"; recommended: ""  }
            // Total Carbohydrate
            ListElement { nurtrition:"Dietary Fiber"; weight:"3g"; percentage:"1%"; catalog: "Total Carbohydrate"; recommended: "limit"  }
            ListElement { nurtrition:"Sugars"; weight:"3g"; percentage:"0%"; catalog: "Total Carbohydrate"; recommended: "recommend"  }
            // Protein
            ListElement { nurtrition:"Protein"; weight:"3g"; percentage:"1%"; catalog: "Protein"; recommended: ""  }
            // Others
            ListElement { nurtrition:"Vitamin A"; weight:"3mg"; percentage:"1%"; catalog: "Others"; recommended: ""  }
            ListElement { nurtrition:"Calcium"; weight:"3mg"; percentage:"1%"; catalog: "Others"; recommended: ""  }
            ListElement { nurtrition:"Iron"; weight:"3mg"; percentage:"1%"; catalog: "Others"; recommended: ""  }
            ListElement { nurtrition:"Phosphorus"; weight:"3mg"; percentage:"1%"; catalog: "Others"; recommended: ""  }
        }

        ListView {
            id: container
            width: parent.width
            height: 454
            clip: true
            interactive: false // Disable the scrolling
            model: nurtritionModel
            delegate: nurtritionDelegate

            section.property: "catalog"
            section.criteria: ViewSection.FullString
            section.delegate: nurtritionSection
        }

        // Spacing line - thin
        Rectangle {
            width: parent.width
            height: 2
            color: "black"
            opacity: 0.6
        }

        // Notice
        Image {
            width: parent.width
            height: 170
            fillMode: Image.PreserveAspectFit
            source: "qrc:/Images/notice.png"
        }
    }
}
